<template>
	<view class="go">
		<view class="head">
			<image :src="head.img" mode="widthFix" @click="goback" style="width: 8%;"></image>
			<view>{{head.text}}</view>
		</view>
		<view class="img" style="position: relative;">
			<image :src="img" mode="widthFix" style="width: 100%;" @click="open('one')"></image>
			<uni-popup ref="popup" type="top" :mask-click="false" :maskBackgroundColor="rgba(0, 0, 0, 0)">
				<view class="imgs">
					<image :src="img" mode="widthFix" style="width: 750rpx;" @click="close"></image>
				</view>
			</uni-popup>
			<image :src="gohead" mode="widthFix" class="gohead" @click="gogo"></image>
			<view class="gotext" v-show="goshow">
				已到达瑞金，距离下一地点还有3000里
			</view>
		</view>
		<view class="bottom">
			<view class="km">
				<view class="kmcont" @click="open('two')">
					<view>{{km.text}}</view>
					<view class="kmgo">{{km.kmgo}}</view>
				</view>
				<uni-popup ref="popup2" type="center" :mask-click="false">
					<view class="kmconts" style="background-color: #fff;width: 600rpx;margin:0 auto;text-align: center;padding-bottom: 100rpx;border-radius: 30rpx;overflow: hidden;">
						<view class="redbg" style="background-color: #D12A14;text-align: center;font-size: 42rpx;color: #fff;padding: 60rpx 0 40rpx;">
							<image src="../../static/ok.png" mode="widthFix" style="width: 120rpx;"></image>
							<view>兑换成功</view>
						</view>
						<view style="color: #F91111;padding: 20rpx 0;">您已累计行走351.2公里</view>
						<view>距离终点更近了，继续加油！</view>
					</view>
					<image src="../../static/close.png" mode="widthFix" style="width: 100rpx;margin: 0 auto;display: block;" @click="close"></image>
				</uni-popup>
				<view class="qrcode">
					<image :src="km.kmqrcode" mode="widthFix" class="codeimg"></image>
				</view>
			</view>
			<view class="list">
				<view class="title">{{listtitle}}</view>
				<view class="listcont">
					<dl v-for="(item,index) in list">
						<dt>{{item.text}}</dt>
						<dd>{{item.num}}</dd>
					</dl>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goshow: false,
				head:{
					img:"../../static/back.png",
					text:"距离瑞金还差2000步"
				},
				img:"../../static/go.jpg",
				gohead:"../../static/gohead.jpg",
				km:{
					text:"里程",
					kmgo:"GO",
					kmqrcode:"../../static/qrcode.png"
				},
				listtitle:"路线图",
				list:[{
					text:"累计行走里程",
					num:0
				},{
					text:"累计行走天数",
					num:0
				},{
					text:"排名",
					num:"未上榜"
				},{
					text:"兑换比例",
					num:"4：1000"
				},{
					text:"今日兑换步数",
					num:0
				},{
					text:"可兑换步数",
					num:2622
				},
				]
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			open(a) {
				if(a === 'one') {
					console.log(a)
					this.$refs.popup.open()
				}else if (a === 'two') {
					this.$refs.popup2.open()
				}	
			},
			close() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			},
			gogo() {
				this.goshow = !this.goshow
				console.log(this.goshow)
			}
		}
	}
</script>

<style lang="scss">
	page{background-color: #fff;}
	*{padding: 0;margin: 0;}
	.head{background-color: #D12A14;color: #fff;display: flex;align-items: center;padding: 10rpx 0;}
	.imgs{background-color: rgba(0, 0, 0, 0.2);padding: 60rpx 0 100rpx;width: 100%;margin-top: 120rpx;}
	.gohead{width: 65rpx;z-index: 10;position: absolute;right: 0;bottom: 120rpx;}
	.gotext{width: 300rpx;position: absolute;right: 0;bottom: 40rpx;}
	.bottom .km{position: relative;}
	.bottom .km .kmcont{position: absolute;background-color:rgba(209,42,20, 0.7);color: #fff;width: 160rpx;height: 156rpx;border-radius: 50%;text-align: center;padding-top: 40rpx;box-sizing: border-box;line-height: 45rpx;top: -50rpx;left: 300rpx;}
	.bottom .km .kmcont .kmgo{font-size: 34rpx;}
	.bottom .km .codeimg{width:55rpx;position: absolute;right: 40rpx;top: 40rpx;}
	/* 路线图 */
	.bottom .list{padding: 120rpx 28rpx 0;}
	.bottom .list .title{margin-bottom: 30rpx;}
	.bottom .list .listcont{display: flex;flex-wrap: wrap;justify-content: space-around;}
	.bottom .list .listcont dl{width: 200rpx;text-align: center;line-height: 60rpx;margin-bottom: 20rpx;}
	.bottom .list .listcont dl dt{color: #BDBAC3;}
</style>